<template>
  <div class="flex flex-row">
    <div class="log-img">
      <div>
        <img
          src="../../../public/picture/learning.png"
          style="height: 80%; width: 80%"
        />
      </div>
    </div>
    <div class="login">
      <img
        src="../../../public/picture/logo.png"
        style="height: auto; width: 60%"
      />

      <div class="flex flex-col items-center w-[60%] mb-3">
        <div class="mb-3">
          <label
            for="username"
            class="block font-medium leading-6 text-gray-900"
          >Username</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              👤
            </div>
            <input
              v-model="username"
              type="text"
              name="text"
              id="username"
              class="block w-[320px] rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              placeholder="请输入用户名"
            />
          </div>
        </div>
        <div>
          <label
            for="password"
            class="block font-medium leading-6 text-gray-900"
          >Password</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              🔑
            </div>
            <input
              v-model="password"
              name="password"
              id="password"
              class="block w-[320px] rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <button
          class="btn w-[320px] mb-3 mt-5"
          @click="register"
        >注册</button>
        <div
          class="w-[320px]"
          style="text-align: center"
        >
          已有账号?<a
            href="/login"
            class="text-indigo-600"
          >立刻登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import service from '../../service/service'
import { useUserStore } from '../../stores/user'
const userStore = useUserStore();
const router = useRouter();
const username = ref('');
const password = ref('');

const register = () => {
  userStore.initUserInfo()
  userStore.userinfo.username = userStore.userinfo.name = username.value;
  userStore.userinfo.password = password.value;
  service({
    method: 'post',
    url: 'wuli-user/register',
    data: {
      data: {
        name: username.value,
        password: password.value,
        role: 0,
        username: username.value
      }
    }
  })
    .then((result) => {
      if (result.data.code === 200) {
        router.push({ path: '/login' })

        ElMessage({
          message: '注册成功',
          type: 'success',
        })
      } else {
        ElMessage({
          message: '注册失败',
          type: 'error',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style>
.log-img {
  width: 70%;
  height: 100vh;
  background-image: url('../public/picture/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 30%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.btn {
  background: #2f025d;
  background-image: -webkit-linear-gradient(top, #2f025d, #8c279f);
  background-image: -moz-linear-gradient(top, #2f025d, #8c279f);
  background-image: -ms-linear-gradient(top, #2f025d, #8c279f);
  background-image: -o-linear-gradient(top, #2f025d, #8c279f);
  background-image: linear-gradient(to right, #2f025d, #8c279f);
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 15px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #2f025d;
  text-decoration: none;
}
</style>